<template>
<!-- 充值 -->
<div id="addMoney">
	<header class="mui-bar mui-bar-nav header">
		<div class="mui-icon mui-icon-left-nav mui-pull-left" @tap="$router.go(-1)"></div>
		<h1 class="mui-title">{{routerTitle}}</h1>
	</header>
	<div class="mui-content">
		<form class="mui-input-group">
			<div class="mui-input-row">
				<label>充值方式</label>
				<select v-model="way" :style="way==0?'color:#999':''" class="mui-input-clear">
					<option value="0">请下拉选择</option>
					<!-- <option value="weChat">微信</option>
					<option value="alipay">支付宝</option> -->
					<option value="bank">银行卡</option>
				</select>
			</div>
			<div class="mui-input-row">
				<label>充值金额</label>
				<input type="number" v-model="money" class="mui-input-clear" placeholder="请输入金额（元）">
			</div>
			<div class="mui-button-row">
				<button type="button" class="mui-btn mui-btn-primary" @tap="sureAddMoney">确认</button>
				<button type="button" class="mui-btn mui-btn-danger" @tap="way='0';money=''">取消</button>
			</div>
		</form>
	</div>
	<div id="toPay" :style="showToPay?'left:0':'left:100%'">
		<span class="mui-icon mui-icon-close" @tap="showToPay=false;accountData={};$router.push({path:'/addMoneyRecord'})"></span>
		<h3>请按要求付款</h3>
		<div class="explain">
			付款说明：{{payExplain}}
		</div>
		<ul class="mui-table-view">
			<li class="mui-table-view-cell">收款方式：{{accountData.way}}</li>
			<li class="mui-table-view-cell" v-clipboard:copy="copyLink(curRemarkCode)" v-clipboard:success="onCopy" v-clipboard:error="onError">备注码：{{curRemarkCode}}</li>
			<li class="mui-table-view-cell" v-clipboard:copy="copyLink(accountData.account)" v-clipboard:success="onCopy" v-clipboard:error="onError">账号：{{accountData.account}}</li>
			<li class="mui-table-view-cell" v-clipboard:copy="copyLink(accountData.name)" v-clipboard:success="onCopy" v-clipboard:error="onError">名称：{{accountData.name}}</li>
			<li class="mui-table-view-cell" v-clipboard:copy="copyLink(accountData.bankName)" v-clipboard:success="onCopy" v-clipboard:error="onError">开户行：{{accountData.bankName}}</li>
			<li class="mui-table-view-cell" v-clipboard:copy="copyLink(accountData.bankBranch)" v-clipboard:success="onCopy" v-clipboard:error="onError">支行：{{accountData.bankBranch}}</li>
		</ul>
		<button type="button" class="mui-btn mui-btn-warning" @tap="okPayfn(accountData.recordId)">我已付款</button>
	</div>
</div>
</template>

<script>
import {addMoney,findPayCodeById,okPay,addMoneyRemarkCodeGet} from "@/api/my"
export default{
	name:"addMoney",
	data(){
		return{
			way:"0",
			money:"",
			showToPay:false,
			accountData:{},
			curRemarkCode:null
		}
	},
	watch:{
		curRemarkCode(val){
			if(val){
				mui.hideLoading()
			}
		}
	},
	mounted(){
		mui.showLoading()
		this.getRemarkCode()
	},
	methods:{
		sureAddMoney(){
			let data = {way:this.way,money:this.money,remarkCode:this.curRemarkCode};
			
			if(data.way==0){
				mui.toast("请选择充值方式")
				return;
			}
			
			if(data.money=="" || data.money==0){
				mui.toast("充值金额有误")
				return;
			}
			
			mui.showLoading()
			addMoney(data).then(res=>{	//请求充值订单
				mui.hideLoading()
				if(res.message){
					mui.toast(res.message)
					return;
				}
				if(res>-1){
					this.toPay(res)
				}
			})
		},
		getRemarkCode(){	//请求备注码
			addMoneyRemarkCodeGet().then(res=>{	//请求备注码
				if(res.remarkCode=="repeat"){	//未请求到 递归
					this.getRemarkCode()
				}else{
					this.curRemarkCode = res.remarkCode
				}
			})
		},
		toPay(_id){
			mui.showLoading("等待中..", "div");
			this.showToPay = true;
			findPayCodeById(_id).then(res=>{
				res.recordId = _id
				this.accountData = res
				mui.hideLoading()
			})
		},
		copyLink(e){	//复制
			return e
		},
		onCopy(e){
			mui.alert("复制到剪贴板成功")
		},
		onError (e) {
		   mui.alert("复制失败")
		},
		okPayfn(id){
			mui.showLoading("等待中..", "div");
			okPay(id).then(res=>{
				if(res==200){
					mui.toast("已提交付款")
					this.showToPay = false;
				}
				mui.hideLoading()
			})
		}
	}
}
</script>

<style scoped>
.mui-button-row button{
	margin: 0 5px;
}
</style>
